<template>
  <div class="container">
    <Breadcrumb :pathContent="content"/>
    <div class="easy-content">
      <el-form ref="ruleForm" :model="formData" :rules="rules">
        <el-row>
          <h1 class="title">客户信息</h1>
          <el-col :span="12">
            <el-form-item  label-width="100px" label="供应商" prop="suppliersId">
              <el-select  v-model="formData.suppliersId" @change="selected_suppliers" :disabled="isOrder">
                <div v-for="item in suppliersAll" :key="item.id">
                  <el-option :label="item.suppliersCompany" :value="item.id"></el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item  label-width="100px" label="分销商" prop="source">
              <el-select  v-model="formData.source" :disabled="isOrder">
                <div v-for="item in distributionAll" :key="item.id">
                 <el-option :label="item.sourcel" :value="item.id"></el-option>
                </div>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <h1 class="title">预订信息</h1>
            <el-col :span="12">
              <el-form-item  label-width="100px" label="城市" prop="city">
               <el-cascader
                    :options="cityList"
                    :props="{ value: 'cityId', label: 'cityName', children: 'cityList' }"
                    @change="handleCascader"
                    :disabled="!cityList.length || isOrder"
                    v-model="formData.city"
                    format="yyyy 年 MM 月 dd 日"
                    >
               </el-cascader>
              </el-form-item>
              <el-form-item :required="true" label-width="100px" label="物理房型" prop="bookingRoom">
                <el-select v-model="formData.bookingRoom"  :disabled="!roomAll.length || isOrder" @change="selected_room" >
                  <div v-for="item in roomAll" :key="item.id">
                    <el-option :label="item.roomName" :value="item.id"></el-option>
                  </div>
                </el-select>
              </el-form-item>
               <el-form-item  label-width="100px" label="入住日期" prop="liveTime">
                  <el-date-picker
                    v-model="formData.liveTime"
                    type="date"
                    placeholder="请选择"
                     @change="handleLiveTime"
                     :disabled="isOrder"
                     value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                    >
                  </el-date-picker>
               </el-form-item>
               <el-form-item label-width="100px" label="预订间数"  prop="bookingRoomsNum">
                 <el-input v-model="formData.bookingRoomsNum" type="text" placeholder="请输入预订间数" :disabled="isOrder"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :required="true" label-width="100px" label="酒店名称" prop="bookingHotel">
                <el-select :disabled="!hotelAll.length || isOrder" v-model="formData.bookingHotel" @change="selected_hotel" >
                  <div v-for="item in hotelAll" :key="item.id">
                    <el-option :label="item.hotelName" :value="item.id"></el-option>
                  </div>
                </el-select>
              </el-form-item>
              <el-form-item :required="true" label-width="100px" label="售卖房型"  prop="bookingSellingRoom">
                <el-select v-model="formData.bookingSellingRoom" placeholder="请输入售卖房型" :disabled="!saleRoomAll.length || isOrder" >
                  <div v-for="item in saleRoomAll" :key="item.id">
                    <el-option :label="item.saleRoomName" :value="item.id"></el-option>
                  </div>
                </el-select>
              </el-form-item>
               <el-form-item  label-width="100px" label="离店日期" prop="leaveTime">
                <el-date-picker
                  v-model="formData.leaveTime"
                  type="date"
                  @change="handleLeaveTime"
                  placeholder="请选择"
                  :disabled="isOrder"
                  value-format="yyyy-MM-dd"
                   format="yyyy-MM-dd"
                  >
                </el-date-picker>
            </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <h1 class="title">入住信息</h1>
            <el-col :span="12">
               <el-form-item label-width="100px" label="入住人" prop="stayPerson">
                 <el-input v-model="formData.stayPerson" type="text" placeholder="请输入" :disabled="isOrder"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label-width="100px" label="联系人电话">
                 <el-input v-model="formData.stayMobile" type="text" placeholder="请输入" :disabled="isOrder"></el-input>
               </el-form-item>
            </el-col>
        </el-row>
         <el-button type="primary" size="small"  @click="submitForm('ruleForm')" style="margin-top:10px;" v-if="!isOrder">生成价格单第一步</el-button>
         <el-button type="primary" size="small"  @click=" isOrder = false " style="margin-top:10px;" v-if="isOrder">重新生成订单</el-button>
      </el-form>
      <div style="padding-top:25px" v-if="isOrder" class="clearfix">
         <h1 class="title fl">入住信息</h1>
         <div class="priceList fl">
           <p class="totle-info">
             <span>售卖房价：<span class="price">￥{{totlePrice}}</span></span>
             <span>{{orderPrices.roomNight}}   总{{orderPrices.roomTotal}}间</span>
           </p>
           <span class="allHandle" @click="editAllPrice" v-if="orderPricesAll.length > 1 ">批量改价 <i class="fa fa-pencil"></i></span>
           <ul class="price-list-day">
             <li v-for="(item,index) in orderPricesAll" :key="item.id" @click="editPrice(index)">
               <div>
                 <span>{{item.date}}</span><span><span>售 {{item.salePrice}} </span></span><i class="fa fa-pencil"></i>
               </div>
             </li>
           </ul>
         </div>
      </div>
      <el-button type="primary" size="small"  @click="addOrderSure" style="margin-top:10px;" v-if="isOrder">生成价格单第二步</el-button>
    </div>
    <!-- 修改房价弹窗 -->
    <el-dialog
      title="修改房价"
      :visible.sync="dialogVisible"
      width="30%"
      @close = "restData"
      >
      <div class="dialog-content">
          <div>
           <span class="label" style="margin-right:15px">日期: </span>
           {{editDate}}
        </div>
        <div>
          <span class="label" style="margin-right:15px">售价: </span>
          <el-input placeholder="请输入售价"  v-model="salePrice" style="width:200px"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAllSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { addOrder, getAddOrderInfo, getMoney, roomState, roomNum ,getOrderBaseInfo, getPrices} from '@/public/js/order'
  const Breadcrumb = () => import('@/components/common/Breadcrumb')

  export default {
    name: 'orderForm',
    components: {
      Breadcrumb
    },
    data () {
      return {
        content: {
          firstTitle: '订单',
          secondTitle: '新增订单',
          type: 'close'
        },
        orderInfo: null,
        form: {
          state: 0
        },
        formData:{
          "timestamp": new Date().getTime(),
          'city':'',
          "source": '',
          'suppliersId': '',
          "bookingHotel": '',
          "bookingRoom": '',
          "bookingSellingRoom": '',
          "liveTime": "",
          "leaveTime": "",
          "bookingRoomsNum": "",
          "stayPerson": "",
          "stayMobile": "",
          "orderPricesList": [],
          "sellPrice": 0,
          "floorPrice": 0
        },
        distributionAll:[],
        suppliersAll:[],
        hotelAll:[],
        roomAll:[],
        saleRoomAll:[],
        cityList:[],
        province:'',
        city:'',
        rules: {
          suppliersId: [
            { required: true, message: '请选择供应商'}
          ],
          source: [
            { required: true, message: '请选择分销商'}
          ],
          city: [
            {required: true, message: '请选择城市' }
          ],
          bookingHotel: [
            { required: true, message: '请选择酒店名称'}
          ],
          bookingRoom: [
            {  required: true, message: '请选择物理房型'}
          ],
          bookingSellingRoom: [
            { required: true, message: '请选择售卖房型'}
          ],
          bookingRoomsNum: [
            { required: true, message: '请填写入预订间数'}
          ],
          liveTime: [
            { required: true, message: '请填写入住时间'}
          ],
          leaveTime: [
            { required: true, message: '请填写离店时间'}
          ],
          stayPerson: [
            { required: true, message: '请填写入住人'}
          ],
        },
        isOrder:false,
        orderPrices:'',
        dialogVisible:false,
        editDate:'',
        salePrice:'',
        orderPricesAll:[],
        totlePrice: 0,
        isAll: true,
        indexPrice: '',
        sellPrice:''
      }
    },
    created () {
      window.commo.showMenu(this)
      this.getBaseInfo()
    },
    watch: {
      orderPricesAll:{
        handler(val) {
          this.totlePrice = 0;
          val.forEach(item=>{
            this.totlePrice+= parseInt(item.salePrice)
          })
          this.formData.orderPricesList = val
          this.formData.sellPrice = this.totlePrice
        },
        deep: true
      }
    },
    methods: {
      getBaseInfo(){
        getOrderBaseInfo({
          suppliersId: this.formData.suppliersId,
          province:this.province,
          city:this.city,
          hotelId:this.formData.bookingHotel,
          roomId : this.formData.bookingRoom

        }).then(res=>{
          console.log(res)
          if (!res.data.errCode) {
            this.suppliersAll = res.data.suppliersAll
            this.distributionAll = res.data.distributionAll
            this.hotelAll = res.data.hotelAll ? res.data.hotelAll : []
            this.roomAll = res.data.roomAll ? res.data.roomAll : []
            this.saleRoomAll = res.data.saleRoomAll ? res.data.saleRoomAll :[]
            this.cityList = res.data.cityList ? res.data.cityList : []
          }
        })
      },
      selected_suppliers(val){
        this.formData.bookingHotel = ''
        this.formData.bookingRoom = ''
        this.formData.bookingSellingRoom = ''
        this.province = ''
        this.city = ''
        this.getBaseInfo()
      },
      handleCascader(val) {
        if (val.length>1) {
          this.province = val[0]
          this.city = val[1]
          this.formData.bookingHotel = ''
          this.hotelAll = []
        }
        this.getBaseInfo()
      },
      selected_hotel(val) {
       this.formData.bookingRoom = ''
       this.formData.bookingSellingRoom = ''
       this.getBaseInfo()
      },
      selected_room() {
        this.formData.bookingSellingRoom = ''
        this.getBaseInfo()
      },
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.isOrder = true;
            this.getDayPrice()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      back () {
        this.$router.go(-1)
      },
      handleLiveTime(liveTime){
        if (this.formData.leaveTime && this.formData.leaveTime < liveTime) {
         this.$message.error('离店时间不能小于入住时间');
          this.formData.liveTime = ''
        }
      },
      handleLeaveTime(leaveTime){
        if (this.formData.liveTime && this.formData.liveTime > leaveTime) {
          this.$message.error('离店时间不能小于入住时间');
          this.formData.leaveTime = ''
        }
      },
      getDayPrice() {
        getPrices({
          "saleRoomId": this.formData.bookingSellingRoom,
          "roomsNum": this.formData.bookingRoomsNum,
          "startTime": this.formData.liveTime,
          "endTime": this.formData.leaveTime
        }).then(res=>{
          if (!res.data.errCode) {
            this.orderPrices = res.data
            this.orderPricesAll = res.data.orderPricesAll
          }
        })
      },
      //批量改价
      editAllPrice(){
        this.isAll = true
        this.dialogVisible = true
        this.editDate = this.orderPricesAll[0].date + '至' +this.orderPricesAll[this.orderPricesAll.length-1].date
      },
      // 单个改价
      editPrice(index){
        this.dialogVisible = true
        this.indexPrice = index
        this.isAll = false
         this.orderPricesAll.forEach((item,i)=>{
            if (i === index) {
              this.editDate = item.date
              this.salePrice = item.salePrice
            }
        })
      },
      editAllSure(){
        if (!this.salePrice) {
          this.$message.error('请输入售价')
        }else{
           if ( this.isAll) {
            this.orderPricesAll.forEach(item=>{
             item.salePrice = this.salePrice
            })
           }else{
              this.orderPricesAll.forEach((item,i)=>{
              if (i === this.indexPrice) {
                item.salePrice = this.salePrice;
              }
            })
           }
           this.dialogVisible = false
        }
      },
      restData(){
        this.salePrice = ''
      },
      // 新增订单第二步
      addOrderSure(){
        console.log('formData',this.formData)
        addOrder(this.formData).then(res=>{
           if (!res.data.errCode) {
            this.$message({
              message: '新增订单成功',
              type: 'success'
            });
            this.back()
           }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-form-item {
    margin-bottom: 15px;
  }
  .el-col-10 {
    width: 43.5%;
  }
  .container {
    .el-select,
    .el-input {
      width: 85%;
    }
    .el-textarea {
      width: 85%;
    }
    .el-cascader{
      width:85%;
    }
    .action {
      bottom: 0;
      margin-top: 20px;
      padding: 20px 30px;
      box-shadow: 0 -5px 2px #e6ebf5;
      text-align: left;
      position: fixed;
      width: 85.4%;
      background: #fff;
    }
    .title{
      color: #6d2377;
      font-size: 16px;
      padding-bottom:20px;
    }
    .priceList{
      padding-left:40px;
      .totle-info{
        padding-bottom: 30px;
        span{
          margin-right:15px;  
        }
      }
      .allHandle{
        display: inline-block;
        font-size:14px;
        padding-bottom:20px;
        color:#6d2377;
        cursor: pointer;
      }
      .price-list-day{
        li{
          float: left;
          margin-right:15px;
          border:1px solid #6d2377;
          border-radius: 3px;
          padding:8px 10px;
          cursor: pointer;
          i{
            color:#6d2377;
          }
          &>div>span{
            margin-right:5px;
            display: inline-block;  
          }
          &:hover{
            opacity: 0.8;
          }
        }
      }
    }
  }
</style>
